サイトのナビゲーションシステムについて整理する【CCG管理者向け】

サイトのナビゲーションシステムについて整理する【CCG管理者向け】

Clock Icon2023.08.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

このブログについて

本ブログは ナレッジサイトである Classmethod Cloud Guidebook(CCG) 1 の運営・改善チーム向けに連携したナレッジです。 情報アーキテクチャを考えるに当たって、一般に参考になる部分もあるため、ブログにて公開しています。

CCGのサイト構成をより良くするための情報アーキテクチャを考えます。 特に今回は情報アーキテクチャの1要素である ナビゲーションシステム について取り上げます。

なお、本ブログは以下の O'Reilly 情報アーキテクチャ書籍を大いに参考にしています。

前提

そもそも情報アーキテクチャとは?

情報アーキテクチャは 情報を見つけやすく、分かりやすいものにするための考え方 のことを言います。

特に、大量にある情報をもつサイト(システム)において、重要になってきます。

ナビゲーションシステムとは?

情報アーキテクチャの1要素であり、 現在地の把握情報の探索 を可能にするシステムです。 ユーザーがサイト内で迷わないために、様々な工夫ができる重要な要素です。

詳細は後述しますが、例えば DevelopersIO においても 以下のような工夫(ナビゲーションシステム)が施されています。

img

img

埋め込み型ナビゲーションシステム

サイトに埋め込む形のナビゲーションとして、 大きく以下 3つの分類があります。

役割
グローバルナビゲーション どこにいるのか?
ローカルナビゲーション 近くに何があるのか?
コンテキストナビゲーション ここにあるものと関連するものは何か?

以降でそれぞれのナビゲーションを説明します。

✅ グローバルナビゲーション

サイトの全ページで表示される ナビゲーションです。 どこにいるのか をユーザーに伝えます。

例えば Classmethodの企業サイトの グローバルナビゲーションは以下の部分になります。

img

[classmethod] のロゴが左上にあり、 「いま居るところが Classmethod のサイトである」ことがはっきりと分かります。

また、 [特徴][得意分野] などのリンクは サイトの構造(提供している情報)を表しています。 グローバルナビゲーションのリンクから、 ユーザーは欲しい情報を探索することができます。

一方で、2023-08 時点の CCG のグローバルナビゲーションを見てみます。

まずは以下CCGのアイコン部分です。 CCGアイコンをクリックするとトップページへ遷移できます。

img

もう一つ、左部にあるコンテンツ階層もグローバルナビゲーションと言えるでしょう。 CCGが提供するコンテンツ全体、階層構造を俯瞰できます。

img

✅ ローカルナビゲーション

近くに何があるのか を把握し、その領域を探索できるように するためのナビゲーションです。

例えば、AWSのマネジメントコンソールは AWSのサービス単位でローカルナビゲーションが提供されています。

img

「そのAWSサービスの構成要素や機能」を把握し、探索することができます。

一方で、2023-08 時点の CCG のローカルナビゲーションについて考えてみます。 現状は右部にある [目次] が該当します。

img

目次に記載されている見出しタイトルをクリックすることで、 その見出しまでジャンプできます。

✅ コンテキストナビゲーション

関連するもの を探索できるようにするためのナビゲーションです。

「参照(See Also)」として、関連する製品やサービスへ案内することが多いです。 冒頭で紹介した DevelopersIO ブログの 「関連記事」が、まさにコンテキストナビゲーションです。

img

ハイパーリンクとして、関連記事を埋め込むのも コンテキストナビゲーションです。 例えばCCGの以下部分です。

img

補足型ナビゲーションシステム

サイトの階層外にあり、 コンテンツの発見を補足するナビゲーションです。

いくつか補足型ナビゲーションシステムを紹介します。

✅ サイトマップ

サイトマップは「そのサイトにある 全コンテンツを一望 する」ためにあります。

以下は Classmethodのサイトマップ です。

img

コンテンツの階層構造を視覚化して、 ユーザーがコンテンツ全容を理解できるように工夫されています。

✅ サイトインデックス

キーワードや語句を 辞書順に表示 したものです。 探したいものが明確であるときに役に立ちます。

例えば AWS CLI リファレンス 冒頭には コマンド一覧が辞書順に並んでいます。

img

✅ 検索

ユーザーが キーワードを入力して、コンテンツを探せる ようにするためのシステムです。

2023-08 時点の CCGではサイト内コンテンツの検索が可能です。

img

ほか(パンくずリスト)

パンくずリストは今後の改善で役立ちそうなので紹介します。

パンくずリストは、 サイトの現在地(階層)を表示 するナビゲーションです。

例えば Classmethodの 製造業ページ における パンくずリストは以下部分です。

img

見ているサイトが「どこにあるコンテンツか」を把握できます。 また、「>」 で区切られた各要素はハイパーリンクになっているので、 ここから上位の階層へ移動することもできます。

まとめ(伝えたいこと)

色々とナビゲーションについて列挙しました。 まとめます。

ナレッジサイトである Classmethod Cloud Guidebook は今後も情報量が増え続けます。 そのために ユーザーがサイト内で迷わないための工夫 を考慮し続ける必要があります。

その工夫を考える際に、情報アーキテクチャは役に立ちます。 そして、本ブログでは ナビゲーションシステム について考えました。

ナビゲーションシステムにおいてはユーザー目線で、以下を考えます。

  • どこにいるのか? (グローバルナビゲーション)
  • 近くに何があるのか? (ローカルナビゲーション)
  • ここにあるものと関連するものは何か? (コンテキストナビゲーション)

また、補足的にサイトマップや検索などを活用して、 ユーザーの「情報へのアクセス」を補助できます。

直近、2023-08 時点の CCG にはサイトマップやパンくずリストが無いので、それらの導入を考えても良いかもしれません。

参考


  1. Classmethod Cloud Guidebook(CCG)は クラスメソッドメンバーズ(請求代行サービス)向けに公開している ナレッジサイトです。詳しくは こちらの紹介ブログ を参照ください。 

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.